<template>
    <div class="dashboard-container">
        <div class="app-container">
            <el-card shadow="never">
                <!-- 菜单添加按钮 -->
                <el-row type="flex" justify="end">
                    <el-col :span="12">
                        <!--  style="margin-right: 30px; ,margin-buttom: 60px" -->
                        <el-button class="filter-item fr" size="small" @click="addMenu" type="success" icon="el-icon-edit">
                            添加菜单</el-button>
                    </el-col>
                </el-row>
                <!-- 基本树形结构  结合treeTable文件 引入相关联的结构以及按钮 -->
                <tree-table border :data="dataList" :columns="columns" :tree-structure="true" :listLoading="listLoading"
                    :rowClassStatus="rowClassStatus" @handleUpdate="handleUpdate" @removeUser="removeUser"></tree-table>
                <!-- 新增标签弹层  从menuadd组件中引入-->
                <MenuAdd ref="editMenu" :text="text" :pageTitle="pageTitle" :PermissionGroupsList="PermissionGroupsList"
                    :notPointDataList="notPointDataList" :parentDataList="parentDataList" @newDataes="handleLoadData"
                    @handleCloseModal="handleCloseModal"></MenuAdd>

                <!-- <permissionsApi></permissionsApi>
       <permissions></permissions> -->
            </el-card>
        </div>
    </div>
</template>

<script>
import treeTable from '@/components/TreeTable/index.vue' // 引入树形结构和按钮
import MenuAdd from './../components/menu-add' // 引入请求接口
import { list, remove, detail, update, add } from '@/api/base/menus' // 弹窗
import permissions from '../components/permissions-add'
import permissionsApi from '../components/permissionsApi-add'
let _this = []
export default {
  name: 'treeTableDemo',
  components: {
    permissions,
    permissionsApi,
    treeTable,
    MenuAdd
  },
  data () {
    return {
      MenuAdd: 'menuAdd',
      listLoading: true,
      dataList: [], // 页面数据
      newArray: [],
      pageTitle: '菜单', // 页面标题
      text: '', // 新增、编辑文本
      PermissionGroupsList: [], // 权限组加载列表
      parentDataList: [], // 从menuadd引入进来的数据
      notPointDataList: [],
      columns: [
        {
          text: '标题',
          value: 'title',
          width: 200,
          render: (h, params) => {
            return h('div', [
              h('i', {
                class: 'ivu-icon ' + params.row.icon,
                style: {
                  marginLeft: `${20 * params.row.layer}px`,
                  marginRight: '5px',
                  fontSize: '16px'
                }
              }),
              h('i', params.row.title)
            ])
          }
        },
        {
          text: '权限点代码',
          value: 'code'
        }
      ]
    }
  },
  methods: {
    // 获取列表数据
    handleLoadData (parameters) {
      this.listLoading = true
      list(parameters).then((data) => {
        this.dataList = data.data
        this.listLoading = false
        // 声明一个新的空数组  字体图标
        const newArray = []
        // 文件的字体图标
        const icon = 'ivu-icon-document'
        const makeNewItem = function (layer, oldItem) {
          let icon

          if (!oldItem.is_point) {
            // 从childs长度上判断添加哪个字体图标   el-icon-view 眼睛  el-icon-document文件
            if (oldItem.childs && oldItem.childs.length > 0) {
              icon = ' fa fa-folder-open-o fa-fw'
            } else {
              icon = 'fa fa-file-o fa-fw'
            }
          } else {
            icon = ' el-icon-view'
          }
          // console.log(icon)
          const newItem = {
            id: oldItem.id,
            pid: oldItem.pid,
            layer: layer,
            is_point: oldItem.is_point,
            code: oldItem.code,
            title: oldItem.title,
            icon: icon
          }
          return newItem
        }
        const makeLayer = function (layer, item) {
          layer++
          changeAray(layer, item)
          layer--
        }
        function changeAray (layer, oldArray) {
          for (let i = 0; i < oldArray.length; i++) {
            newArray.push(makeNewItem(layer, oldArray[i]))

            if (oldArray[i].childs && oldArray[i].childs.length > 0) {
              makeLayer(layer, oldArray[i].childs)
            }
            if (oldArray[i].points && oldArray[i].points.length > 0) {
              makeLayer(layer, oldArray[i].points)
            }
          }
        }

        const la = 0
        changeAray(la, _this.dataList)
        _this.dataList = newArray
      })
    },
    // 权限列表
    setupData () {
      simple().then((data) => {
        this.PermissionGroupsList = data.data
      })
    },
    // 添加按钮
    addMenu () {
      this.text = '创建'
      //   显示弹窗
      this.$refs.editMenu.dialogFormV()
      // 重置表单
      this.$refs.editMenu.handleResetForm()
    },

    // 取消按钮
    handleCloseModal () {
      this.$refs.editMenu.dialogFormH()
    },
    // 编辑
    // 表单详情数据加载
    // 对其赋值是菜单还是权限点，看编辑下面判断后，有三个函数的调用
    handleUpdate (row) {
      const flag = row.is_point ? 'points' : 'menu'
      _this.$refs.editMenu.changeType(flag)
      _this.$refs.editMenu.dialogFormV()
      _this.$refs.editMenu.hanldeEditForm(row.id)
    },

    // 删除按钮
    removeUser (user) {
      this.$confirm('确定要删除吗 ')
        .then(() => {
          remove({ id: user })
            .then((response) => {
              this.$message.success('成功删除了用户')
              this.dataList.splice(user, 1)
              this.handleLoadData(this.requestParameters)
            })
            .catch((response) => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 数据删除后显示样式
    rowClassStatus () { }
  },
  // 挂载结束
  mounted: function () {
    this.handleLoadData() // 确定
  },
  // 创建完毕状态
  created () {
    _this = this
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
    margin: 10px 0px;
}

.pagination {
    margin-top: 10px;
    // text-align: right;
}
</style>

<style>
.el-table th {
    background-color: #fafafa;
}

.el-table th.is-leaf {
    border-bottom: 2px solid #e8e8e8;
}

.el-table__row i {
    font-style: normal
}
</style>
